<template>
	<view class="content">
		<view class="flex-row title">
			<view class="font-1">{{name}} 你好</view>
			<view class="font-2 color-1" @tap="logout">退出登录</view>
		</view>
		<view class="banner-box">
			<image class="banner" src="../../static/5cf3d40b8d053@2x.jpg" mode="scaleToFill"></image>
		</view>
		<view class="entrance-box">
			<template v-for="item in buttons">
				<view class="entrance" @tap="onClick(item)">
					<image class="entrance-icon" :src="item.image" mode="widthFix"></image>
					<view class="entrance-text">{{item.name}}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				buttons: [
					{ name: '用电管理', titleKey: 'ele_manager', disabled: true, url: '/pages/content/electricity/electricity',image: '../../static/enter-icon_01@2x.png'},
					{ name: '环境管理', titleKey: 'environment_manager', disabled: true, url: '/pages/content/environment/environment',image: '../../static/enter-icon_02@2x.png'},
					{ name: '库门管理', titleKey: 'door_manager', disabled: true, url: '/pages/content/door/door',image: '../../static/enter-icon_03@2x.png'},
					{ name: '预警信息', titleKey: 'warn_manager', disabled: true, url: '/pages/content/warning-info/warning-info',image: '../../static/enter-icon_04@2x.png'},
					// { name: '用电分析', titleKey: 'ele_manager', disabled: true, url: '/pages/content/electricity/analysis/analysis',image: '../../static/enter-icon_01@2x.png'},
					{ name: '服务', titleKey: 'service_manager', disabled: false, url: '/pages/content/service/service',image: '../../static/enter-icon_05@2x.png'},
				],
			}
		},
		onShow() {
			this.name = uni.getStorageSync('user')
			this.getData()
		},
		methods: {
			logout(){
				uni.clearStorageSync()
				this.getData()
			},
			getData() {
			    this.$api.get('api/mobile/getMyModule').then(res => {
					this.list = res.result
					this.buttons.forEach(item=>{
						for(let i in this.list){
							if(this.list[i].titleKey === item.titleKey){
								item.disabled = false
								item.id = this.list[i].moduleId
								break
							}
						}
					})
			    })
			},
			onClick(e) {
				if(e.disabled){
					uni.showToast({
						icon: 'none',
						title: '等待开启'
					});
					return
				}
				uni.navigateTo({
					url: e.url + '?id=' + e.id
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F3F5;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		.title {
			padding: 30rpx;
			justify-content: space-between;
			color: #575757;
			background-color: #ffffff;
		}
		.font-1{
			font-size: $uni-font-size-30;
		}
		.font-2{
			font-size: $uni-font-size-32;
		}
		.color-1{
			color: #333333;
		}
		.banner-box{
			display: flex;
			padding: 20rpx 18rpx;
			padding-bottom: 0;
			.banner{
				width: 714rpx;
				height: 358rpx;
				border-radius: 16rpx;
			}
		}
		.entrance-box{
			padding: 20rpx;
			padding-top: 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			.entrance{
				margin-top: 20rpx;
				margin-right: 20rpx;
				padding: 20rpx 50rpx;
				width: 345rpx;
				height: 146rpx;
				color: #575757;
				font-size: 34rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				&:nth-of-type(2n){
					margin-right: 0;
				}
				.entrance-icon{
					width: 60rpx;
					height: auto;
				}
				.entrance-text{
					padding-left: 16rpx;
				}
			}
		}
	}
</style>
